<template>
  <div id="myItemPosition">
    <!--<gj-loadmore :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" style="margin-top: 42px">-->
    <table class="table my-groups">
      <tbody>
      <tr id="$index" v-for="(item,index) in dataList" @click="clickGroup(item)">
        <td class="one link">
          <span class="is-group">组合</span>
          <div class="group-name">{{item.name}}</div>
        </td>
        <td class="two link">
          <div class="value">{{item.position}}</div>
          <div class="key">仓位</div>
        </td>
        <td class="three link">
          <div class="value" :class="item.income<0?'negative':'positive'">{{item.income}}</div>
          <div class="key">盈亏(<span class="negative" v-if="item.income < 0">{{item.totalProfitrate}}%</span>
            <span class="positive" v-else>+{{item.totalProfitrate}}%</span>)
          </div>
        </td>
        <td class="four">
          <button class="btn change-name" data-gid="" @click.stop.prevent="groupSetNameModal(item)">
            <i class="iconfont icon-huanmingzi"></i>
            <div class="c_name">改名称</div>
          </button>
          <button class="btn clear-out" data-gid="" @click.stop.prevent="groupClearanceModal(item)">
            <div>一键</div>
            <div>清仓</div>
          </button>
        </td>
      </tr>
      </tbody>
    </table>
    <div v-if="noData" class="tips">
      <div>哎哟，我还没有<span class="color-blue">组合持仓</span>哦</div>
      <div class="guide">点击下方建立我的第一个组合</div>
    </div>
    <div v-if="noData" class="create-group" @click.stop.prevent="jumpGroup">
      <i class="iconfont icon-jiahao"></i>&nbsp;&nbsp;创建新组合
    </div>
    <div class="tips" v-if="error != ''">{{error}}</div>
    <div v-if="firstLoading" class="loading">
      <img src="~assets/images/loading.gif" style="width:40px;height:40px;"/>
      <div>加载中</div>
    </div>
    <!--</gj-loadmore>-->
  </div>
</template>
<script>
  import LoadMore from 'components/LoadMore'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import CommonUtil from 'common/common.util'
  import GroupClearanceModal from 'components/modal/GroupClearanceModal'
  import GroupSetNameModal from 'components/modal/GroupSetNameModal'
  import GroupSetNameSuccModal from 'components/modal/GroupSetNameSuccModal'
  export default {
    components: {
      /*子组件*/
      'gj-loadmore': LoadMore,
      'group-clearance-modal': GroupClearanceModal,
      'group-set-name-modal': GroupSetNameModal,
      'group-set-name-succ-modal': GroupSetNameSuccModal
    },
    data() {
      return {
        userCode: '',
        menuFlag: '0',
        dataList: [],
        bottomAllLoaded: false,
        firstLoading: true,
        noData: false,
        error: ''
      }
    },
    created() {
      var vm = this;
      vm.userCode = LocalDAO.getUserCode(); //用户ID
      vm.nickName = LocalDAO.getNickname(); //用户名
      vm.fetchData();
    },
    methods: {
      jumpGroup() {
        this.$router.push({"path": "/buildgroup/buildstep1"})
      },
      fetchData() {
        var vm = this;
        RemoteDAO.callJCL11138(vm.userCode, '0', function (response) {
          if (Number(response.error) === 0) {
            vm.error = '';
            var data = response.data.body.grouplist;
            for (var i = 0; i < data.length; i++) {
              data[i].groupId = data[i].group_id;
              data[i].name = data[i].group_name;
              data[i].position = CommonUtil.toFixed(data[i].position, 2) + "%";
              data[i].income = CommonUtil.toFixed(data[i].total_profit, 2);
              data[i].totalProfitrate = CommonUtil.toFixed(data[i].total_profitrate, 2);
            }
            vm.dataList = vm.dataList.concat(data || []);
            if (vm.dataList.length > 0) {
              vm.noData = false;
            } else {
              vm.noData = true;
            }
          } else {
            vm.error = response.data
          }
          vm.firstLoading = false
        })
      },
      groupClearanceModal(item) {
        this.$store.dispatch('setModal', {visible: true, modalId: 'groupClearanceModal', groupId: item.groupId});
      },
      groupSetNameModal(item) {
//				callback:回调函数，若Number(response.error) === 0,则操作成功 response:{error:0,name:'newname'}
        var self = this;
        this.$store.dispatch('setModal', {
          visible: true,
          modalId: 'groupSetNameModal',
          groupId: item.groupId,
          callback: function (response) {
            if (response.error == 0) {
              item.name = response.name;
              self.groupSetNameSuccModal();
            }
          }
        });
      },
      groupSetNameSuccModal(){
        this.$store.dispatch('setModal', {visible: true, modalId: 'groupSetNameSuccModal'});
      },
      clickGroup(item) {
        var groupId = item.groupId;
        var clientId = this.userCode;
        this.$router.push({path: '/groupdetail', query: {clientId: clientId, groupId: groupId}})
      },
      loadBottom() {
        var vm = this;
        vm.fetchData(function (allLoaded) {
          if (allLoaded) {
            vm.$refs.loadmore.onBottomAllLoaded(); //全部数据加载完成
          } else {
            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  ::-webkit-scrollbar {
    display: none;
  }

  .my-groups {
    -webkit-overflow-scrolling: touch;
  }
  .one {
    @media screen and (max-width: 330px) {
      width: 100px!important;
    }
  }
  .group-name {
    width: 100px;
    @media screen and (max-width: 330px) {
      width: 75px!important;
    }
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .c_name {
      margin-top:-2px;
  }
</style>
